<template>
	<el-container class="container">
		<el-header class="header">
			<div class="img_box">
				<img src="../assets/1.png" />
				<span> 后台管理系统</span>
			</div>
			<el-button type="info" @click="logout">退出</el-button>
		</el-header>
		<el-container>
			<el-aside width="200px" class="aside">
				<el-menu default-active="2" 
					class="el-menu-vertical-demo" 
					unique-opened 
					router
					background-color="#353432" 
					text-color="#fff" 
					active-text-color="#ffd04b">
					<!-- 带折叠的导航栏 -->
					<!-- :index="item.id + ''"  用id区分开每个一级菜单 -->
					<el-submenu :index="item.id + ''" :key="item.id" v-for="item in menuList">
						<template slot="title">
							<i :class="iconsObj[item.id]"></i>
							<span>{{item.authName}}</span>
						</template>
						<!-- :index="'/'+item1.path"   用路径区分开每个二级菜单 -->
						<el-menu-item :index="'/'+item1.path" 
							v-for="item1 in item.children" 
							:key="item1.id"
							@click="saveActivePath('/'+item1.path)">
							<i class="el-icon-menu"></i>
							<span>{{item1.authName}}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				menuList: '',
				activePath:'',
				iconsObj: {
				        125: 'el-icon-s-custom',
				        103: 'el-icon-s-cooperation',
				        101: 'el-icon-s-goods',
				        102: 'el-icon-s-order',
				        145: 'el-icon-s-data'
				      }

			}
		},
		methods: {
			logout() {
				// 清空token
				window.sessionStorage.clear();
				this.$router.push('/login');
			},
			async getAllPerm() {
				let {
					data: res
				} = await this.$http.get('/permission/menus')
				if (res.meta.status != 200) return this.$http.error('权限不足')
				// console.log(res);
				this.menuList = res.data
			},
			saveActivePath(activePath){
				window.sessionStorage.setItem('activePath',activePath)
				this.activePath = activePath
			}
		},
		created() {
			this.getAllPerm();
			this.activePath = window.sessionStorage.getItem('activePath');
		}
	}
</script>

<style>
	.container {
		height: 100%;
	}

	.header {
		background-color: #353432;
		display: flex;
		justify-content: space-between;
		color: #fff;
		align-items: center;
	}

	.img_box {
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: 600;
	}

	.aside {
		background-color: #353432;
	}
</style>
